import React, { useState, useRef, FC } from 'react';
import styles from './CreateDao.css';
import { Row, Col, Button, Card } from 'antd';
// import Background from '../../../assets/createDao.png';
import CreateDaoStepsForm from '../CreateDaoStepsForm';

type CreateDaoPropsType = {
  setIsDao: any;
  DAOInfo: any;
};

const CreateDao: FC<CreateDaoPropsType> = ({ setIsDao, DAOInfo }) => {
  // 控制创建模态框
  const [isCreateDaoModal, setIsCreateDaoModal] = useState(false);

  // 创建
  const toCreateDao = () => {
    setIsCreateDaoModal(true);
  };
  return (
    <>
      {!isCreateDaoModal ? (
        <Card>
          <div
            style={{
              width: '100%',
              height: '500px',
            }}
          >
            <Row>
              <Col
                span={12}
                style={{ paddingTop: 60, paddingBottom: 100 }}
                offset={1}
              >
                <img
                  src={require('../../../../assets/issue.jpg')}
                  alt=""
                  style={{ width: '100%', height: '100%' }}
                />
              </Col>
              <Col span={10}>
                <div
                  style={{
                    position: 'relative',
                    top: '50%',
                    transform: 'translateY(-50%)',
                    textAlign: 'center',
                  }}
                >
                  <span className={styles.title}>DaoBook</span>
                  <span className={styles.content}>共创价值 共享价值</span>
                  <span className={styles.content}>
                    重塑WEB3.0时代的生产关系
                  </span>
                  <Button
                    shape="round"
                    size="large"
                    type="primary"
                    onClick={toCreateDao}
                    style={{ margin: '0 0 12px 0' }}
                  >
                    创建我的Dao组织
                  </Button>
                </div>
              </Col>
            </Row>
          </div>
        </Card>
      ) : (
        <CreateDaoStepsForm
          DAOInfo={DAOInfo}
          setIsDao={setIsDao}
          setIsCreateDaoModal={setIsCreateDaoModal}
        />
      )}
    </>
  );
};

export default CreateDao;
